import { lazy, Suspense } from 'react'
import {
  createBrowserRouter, Navigate
} from 'react-router-dom'
import AppLayout from '@renderer/components/Layout'

// 实现懒加载的用Suspense包裹 定义函数
const lazyLoad = (children) => {
  return <Suspense fallback={<h1>Loading...</h1>}>
    {children}
  </Suspense>
}

// 用懒加载实现优化
const Home = lazy(() => import('@renderer/pages/home'))
const Note = lazy(() => import('@renderer/pages/note'));
const Notebook = lazy(() => import('@renderer/pages/notebook'));
const Trash = lazy(() => import('@renderer/pages/trash'));
const Setting = lazy(() => import('@renderer/pages/setting'));

export const globalRouters = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    children: [
      {
        path: 'home',
        index: true,
        element: lazyLoad(<Home />)
      },
      {
        path: 'notebook',
        element: lazyLoad(<Notebook />)
      },
      {
        path: 'trash',
        element: lazyLoad(<Trash />)
      },
      {
        path: 'setting',
        element: lazyLoad(<Setting />)
      }
    ]
  },
  {
    path: '/note',
    element: lazyLoad(<Note />)
  },
  {
    path: '*',
    element: <Navigate to="/home" replace />
  }
])
